/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-18 12:32:08
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-19 12:29:33
 * @FilePath: \project-my\next-learn-app\src\views\tailwind\waterFall.tsx
 * @Description: 
 */
'use client'
import React, { useEffect, useState } from 'react'
import Image from 'next/image'
// import loadImages from '../../../utils/autoLoadImages'
import img1 from '../../../app/assets/images/F-2e7J1XgAA9pmb.jpg'

// interface ImageItem {
//     url: string
// }
export default function WaterFall() {
    const [images, setImages] = useState([])

    const getImageLists = async () => {
        const imageList = await fetch('http://localhost:3008/v1/picture/list').then(res => res.json())
        // console.log('%c [ imageList ]-21', 'font-size:13px; background:pink; color:#bf2c9f;', imageList)
        setImages(imageList.data)
        // setImages([])
    }
    useEffect(() => {
        // 获取图片列表
        getImageLists()

    }, [])

    return (
        <div className="main-container">
            {/* 本地图片 */}
            <div className='w-80 h-80 overflow-hidden'>
                <Image
                    src={img1}
                    className='w-full h-full'
                    alt={`Photo ${1}`}
                    style={{ objectFit: 'cover' }}
                    quality={75}
                    placeholder="blur"
                />
            </div>

            <div className='water-container p-4 mt-3'>
                {/* 接口获取图片 gird grid-cols-[repeat-(auto-fill, minmax(52px, 1fr))]*/}
                <div className='gap-1 space-y-1 sm:columns-2 sm:space-y-2 sm:gap-2 md:columns-3 md:space-y-3 md:gap-3 lg:columns-4 lg:space-y-4 lg:gap-4'>
                    {images.map((src, index) => (
                        <div key={index} className="relative rounded-lg overflow-hidden">
                            <Image
                                src={src}
                                alt={`Photo ${index + 1}`}
                                className='w-full h-full object-cover'
                                width={200}
                                height={200}
                                quality={75}
                            />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}